<template>
  <div class="detail_paid">
  <el-table :data="detail_paid" highlight-current-row v-loading="listLoading" style="width: 100%;">
    <el-table-column type="index" width="60">
    </el-table-column>
    <el-table-column prop="name" label="菜品名字" min-width="15%">
    </el-table-column>
    <el-table-column prop="image" label="图片" min-width="20%">
      <template slot-scope="scope">
        <img :src="scope.row.image" min-width="70" height="70" />
      </template>
    </el-table-column>
    <el-table-column prop="quality" label="数量" min-width="15%">
    </el-table-column>


  </el-table>
  <el-button @click="cancel">取消订单</el-button>
    </div>
</template>

<script>
  export default {
    data() {
      //get the information
      return {
        detail_paid:
          [
            {
              name: '红烧鸡排',
              image: '../../../../static/kw.jpg',
              quality: '2'
            },
            {
              name: '红烧肥鱼',
              image: '../../../../static/ki.jpg',
              quality: '1'
            }]
      }
    },
    methods: {

      handleEdit:function(index,row) {

      },
      cancel:function(){
        //send a request to back-end to cancel the post
  }
    }
  }
</script>
